{% extends "zylinder_app/skel.html" %}
{% load static %}

{% block addCSS %}
<link rel="stylesheet" href="{% static 'zylinder_app/style.css' %}">
<link rel="stylesheet" href="{% static 'zylinder_app/overlay.css' %}">
<link rel="stylesheet" href="{% static 'zylinder_app/lib/css/auto-complete.css' %}">
{% endblock %}

{% block body %}
<!-- overlay for loading -->
<div id="loadOverlay" class="hideOnSuccess">
  <div id="loadContent" class="overlay">
    <div class="spin hideOnSuccess"></div>
    <p id="loadText" class="hideOnSuccess">einen Moment bitte</p>
  </div>
</div>

<table class="fixedTableLayout"><tbody>
  <tr>
    <td>
        <a href="{% url 'logout' %}">Ausloggen</a>
        -
        <a href="{% url 'zylinder_app:resetPlayer' %}">Zurücksetzen</a>
        -
        <a href="{% url 'zylinder_app:tradeHistory' %}">Handelshistorie</a>
    </td>
    <td rowspan="2">
      <div id="mainStockValueChartContainer"><canvas id="mainStockValueChart"></canvas></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="gameStats">
        <h1>{{ player.alias }}</h1><div class="spin"></div>
        <p>Startkapital: {{ player.startcapital }}€</p>
        <p>Bankguthaben: <span id="money">{{ player.capital }}</span>€</p>
        <p>Aktueller Wertpapierwert: <span id="stockValue">JS</span>€</p>
        <div id="fixedBuyStocks">
          <form class="form-inline" action="buyStocks" id="buyStockForm" hidden>
            {% csrf_token %}
            <input id="stockSearch" placeholder="search stocks..." name="stockSymbol">
            <input type="number" min="1" id="buyAmount" placeholder="amountStocks" name="amountStocks">
            <button type="submit" id="submitStockBuy">Kaufen!</button>
          </form>
          <button id="toggleStockForm">Aktienkaufdialog</button>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2"><table class="fixedTableLayout" id="stockTable">
      <thead>
        <tr>
          <th scope="col">Aktie</th>
          <th scope="col">Kürzel</th>
          <th scope="col">Aktienwert</th>
          <th scope="col">Besitz</th>
          <th scope="col">Aktienbesitzwert</th>
          <th scope="col" width="100rem"></th>
        </tr>
      </thead>
      <tbody>
        <tr id="tableJSWarning"><td colspan="5">Die Liste der Aktien wird geladen, dies kann mehrere Minuten dauern.</td></tr>
        <noscript>Diese Webseite benötigt Javascript. (Code: JS).</noscript>
      </tbody>
    </table></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <form class="form-inline" action="sellStocks" id="sellStockForm" style="right: 4em;position:absolute;" hidden>
        {% csrf_token %}
        <select name="stockSymbol" id="sellStockSelector">
          <option>JS</option>
        </select>
        <input type="number" min="1" placeholder="1" name="amountStocks" size="2em">
        <button type="submit" id="submitStockSell">Verkaufen!</button>
      </form>
    </td>
  </tr>
</tbody></table>
{% endblock %}

{% block addJS %}
<script src="{% static 'zylinder_app/src/getStockPrices.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/showStockPrices.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/getMoney.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/hasLost.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/newStocksCommon.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/buyStocks.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/sellStocks.js' %}" defer></script>
<script src="{% static 'zylinder_app/lib/scripts/chart.min.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/fx/charts/mainStockValueChart.js' %}" defer></script>
<script src="{% static 'zylinder_app/lib/scripts/auto-complete.min.js' %}" defer></script>
<script src="{% static 'zylinder_app/src/fx/buyFieldAutoComplete.js' %}" defer></script>
{% endblock %}
